<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>项目列表</title>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap-table/1.18.1/bootstrap-table.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-table/1.18.1/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.18.1/locale/bootstrap-table-zh-CN.min.js"></script>

</head>

<body>
<div class="container">
    <div id="toolbar" class="btn-group">
        <button id="btn_add" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
        <button id="btn_delete" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
    </div>
    <table id="mytab" class="table text-nowrap"></table>
</div>
</body>

<script type="text/javascript">
    window.operateEvents = {
        'click .RoleOfedit': function (e, value, row, index) {
            if (row.url) {
                window.open(row.url)
            }
        }
    };
    $('#mytab').bootstrapTable({

        {# //键的名字必须与下方columns的field值一样，才能读取到数据#}
        url: "/getdata",
        dataType: "json",
        method: 'get',                      //请求方式（*）
        toolbar: '#toolbar',                //工具按钮用哪个容器
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        sortable: true,                     //是否启用排序
        sortOrder: 'asc',                   //排序方式
        queryParams: false,                 //传递参数（*）
        sidePagination: 'client',           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                       //初始化加载第一页，默认第一页
        pageSize: 10,                       //每页的记录行数（*）
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
        search: true,                       //是否显示表格搜索
        searchAccentNeutralise:true,        //模糊搜索
        strictSearch: true,
        showColumns: true,                  //是否显示所有的列
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        {#height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度#}
        width: 100,
        uniqueId: "id",                     //每一行的唯一标识，一般为主键列
        showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
        cardView: false,                    //是否显示详细视图
        detailView: false,                   //是否显示父子表
        columns: [
            {
                field: 'id',  　　　　　　//返回数据rows数组中的每个字典的键名与此处的field值要保持一致
                title: '序号',
                sortable: true
            },
            {
                field: 'name',
                title: '标题',
                sortable: true
            },
            {
                field: 'class_name',
                title: '分类',
                sortable: true
            }, {
                field: 'url',
                title: '操作',
                width: '80px',
                events: operateEvents,
                formatter: operateFormatter
            }
        ]
    });

    function operateFormatter(value, row, index) {
        return [
            '<input type="submit" value="查看" class="RoleOfedit btn btn-primary btn-sm" style="display:inline"/>',
        ].join('');
    }

    $('#btn_add').on('click', () => {
        $.get('/add', function (data) {
            if (data.code && data.code=='OK'){
                alert(data.code)
                $('#mytab').bootstrapTable('refresh')
            }else {
                alert('添加出错，请重试:'+data.code)
            }
        }, 'json')

    })

    $('#btn_delete').on('click', () => {
        $.get('/delete', function (data) {
            if (data.code){
                alert(data.code)
                $('#mytab').bootstrapTable('refresh')
            }else {
                alert('出错，请重试')
            }
        }, 'json')

    })
</script>


</html>